<template>
  <view class="login">
    <view class="top">
      <view class="top_text">
        <view>你好,</view>
        <view>欢迎使用管理端</view>
      </view>
    </view>
    <view class="bottom">
      <view class="tab_bar">
        <view>
          <uni-forms
            ref="customForm"
            :modelValue="loginForm"
            label-position="top"
          >
            <uni-forms-item label="手机号" required name="username">
              <uni-easyinput
                v-model="loginForm.username"
                placeholder="请输入手机号"
                :clearable="false"
              />
            </uni-forms-item>
            <uni-forms-item label="密码" required name="password">
              <uni-easyinput
                v-model="loginForm.password"
                type="password"
                placeholder="请输入密码"
                :clearable="false"
              />
            </uni-forms-item>
            <uni-forms-item
              label="验证码"
              required
              name="code"
              style="position: relative"
            >
              <uni-easyinput
                v-model="loginForm.code"
                placeholder="请输入验证码"
                maxlength="4"
                :clearable="false"
              />
              <view class="login-code">
                <image
                  :src="codeUrl"
                  @click="getCode"
                  class="login-code-img"
                ></image>
              </view>
            </uni-forms-item>
          </uni-forms>
          <button
            type="primary"
            class="sub_btn"
            @click="submitLogin('customForm')"
          >
            登录
          </button>

          <view class="xieyi">
            <uni-data-checkbox
              multiple
              v-model="loginForm.isRead"
              @change="changeBox"
              :localdata="sexs"
            ></uni-data-checkbox>
            <view>
              我已阅读
              <text @click="handleUserAgrement" class="text_color"
                >用户协议</text
              >和
              <text @click="handlePrivacy" class="text_color">隐私政策</text>
              并理解相关条款内容
            </view>
          </view>
        </view>
      </view>
    </view>

    <image class="login_bg" src="@/static/images/login/login_bg.png" />
  </view>
</template>

<script>
import { getCodeImg } from "@/api/login";

export default {
  data() {
    return {
      // 单选数据源
      sexs: [
        {
          text: "",
          value: 1,
        },
      ],
      activeTab: "0",
      codeUrl: "",
      captchaEnabled: true,
      // 用户注册开关
      register: false,
      globalConfig: getApp().globalData.config,
      loginForm: {
        username: "17305525185",
        password: "admin123",
        code: "",
        uuid: "",
        platform: "Manager",
        isRead: [1],
        // isRead: 0,
      },
      // 自定义表单校验规则
      customRules: {
        username: {
          rules: [
            {
              required: true,
              errorMessage: "手机号不能为空",
            },
            {
              validateFunction: function (rule, value, data, callback) {
                let iphoneReg =
                  /^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[89])\d{8}$/;
                if (!iphoneReg.test(value)) {
                  callback("手机号码格式不正确，请重新填写");
                }
              },
            },
          ],
        },
        password: {
          rules: [
            {
              required: true,
              errorMessage: "密码不能为空",
            },
          ],
        },
        code: {
          rules: [
            {
              required: true,
              errorMessage: "验证码不能为空",
            },
          ],
        },
      },
    };
  },
  created() {
    this.getCode();
  },
  onReady() {
    this.$refs.customForm.setRules(this.customRules);
  },

  methods: {
    // 选择协议
    changeBox(e) {
      console.log(e);
    },
    submitLogin(ref) {
      if (!this.loginForm.isRead.length) {
        uni.showToast({
          title: `请先同意用户协议`,
          icon: "exception",
        });
        return;
      }
      this.$refs[ref]
        .validate()
        .then((res) => {
          this.pwdLogin();
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    // 用户注册
    handleUserRegister() {
      this.$tab.redirectTo(`/pages/register`);
    },
    // 隐私协议
    handlePrivacy() {
      let site = this.globalConfig.appInfo.agreements[0];
      this.$tab.navigateTo(
        `/pages/common/webview/index?title=${site.title}&url=${site.url}`
      );
    },
    // 用户协议
    handleUserAgrement() {
      let site = this.globalConfig.appInfo.agreements[1];
      this.$tab.navigateTo(
        `/pages/common/webview/index?title=${site.title}&url=${site.url}`
      );
    },
    // 获取图形验证码
    getCode() {
      getCodeImg().then((res) => {
        this.captchaEnabled =
          res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },
    // 密码登录
    async pwdLogin() {
      this.$store
        .dispatch("Login", this.loginForm)
        .then((res) => {
          console.log(res);
          this.$modal.closeLoading();
          this.loginSuccess();
        })
        .catch((err) => {
          console.log(err);
          if (this.captchaEnabled) {
            this.getCode();
          }
        });
    },
    // 登录成功后，处理函数
    loginSuccess(result) {
      // 设置用户信息
      this.$store.dispatch("GetInfo").then((res) => {
        this.$tab.reLaunch("/pages/index");
      });
    },
  },
};
</script>

<style lang="scss">
// 样式重置

.uni-forms-item__label {
  font-size: 32rpx !important;
  font-weight: 500 !important;
  color: #333333 !important;
  padding: 0 !important;
}
.is-input-border {
  width: 654rpx !important;
  height: 88rpx !important;
  background: #f5f6f8 !important;
  border-radius: 224rpx 224rpx 224rpx 224rpx !important;
}

.uni-easyinput__content-input {
  font-size: 28rpx !important;
  font-weight: 400 !important;
  color: #999999 !important;
}

.uni-easyinput {
  width: 88% !important;
}
.active {
  border-bottom: solid 8rpx #3b77ff;
}
page {
  background-color: #ffffff;
}

.checkbox__inner {
  border-radius: 50% !important;
}

.login_bg {
  width: 750rpx;
  height: 100%;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}

.login {
  height: 100vh;
  color: #fff;
  .top {
    height: 33.33%;
    width: 100%;
    position: relative;
    .top_text {
      position: absolute;
      bottom: 100rpx;
      left: 34rpx;
      font-size: 40rpx;
    }
  }
  .bottom {
    width: 100% !important;
    box-sizing: border-box;

    text-align: center;
    margin: 0 auto;

    height: 66.66%;
    background: #fff;
    border-radius: 24rpx 24rpx 0 0;
    margin-top: -70rpx;
    color: #000;
    .tab_bar {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 650rpx !important;
      margin: 0 auto;
      font-size: 32rpx;
      .bar_btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
      .sub_btn {
        width: 654rpx;
        height: 88rpx;
        background: linear-gradient(288deg, #5ea2ff 25%, #2782fe 99%);
        border-radius: 100rpx 100rpx 100rpx 100rpx;
        margin: 0;
        font-size: 36rpx;
      }
      .xieyi {
        margin-top: 80rpx;
        display: flex;
        font-size: 24rpx;
        align-items: center;
        color: #c3c3c3;
        .text_color {
          color: #9c9c9c;
        }
      }
    }
  }
}
.login-code-img {
  position: absolute;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
  right: 28rpx;
  width: 140rpx;
  height: 56rpx;
}
.checklist-box {
  margin: 0 !important;
}
.check_box {
  width: 32rpx;
  height: 32rpx;
  margin-right: 16rpx;
}
</style>
